<?php
/**
 * @version     1.0.0
 * @package     com_agents
 * @copyright   Copyright (C) 2014. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author      Nguyen Thanh Trung <nttrung211@yahoo.com> - http://
 */
// no direct access
defined('_JEXEC') or die;

$db = JFactory::getDBO();
$db->setQuery("SELECT id, name FROM #__cities WHERE state = 1");
$cities = $db->loadObjectList();
?>
<style>
#map_canvas {
	width: 539px;
	height: 560px;
}
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript">
jQuery(document).ready(function() {
	changeCity = function(city_id){
		jQuery.ajax({
			type: "POST",
			url: "index.php?option=com_agents&task=dailys.getDistricts",
			data: { city_id: city_id}
		}).done(function( html ) {
			jQuery('#districts').html(html);
		});
	}
	
	changeDistrict = function(district_id){
		jQuery.ajax({
			type: "POST",
			url: "index.php?option=com_agents&task=dailys.getAgents",
			data: { district_id: district_id}
		}).done(function( html ) {
			jQuery('.itemshop').html(html);
		});
	}
	
	initialize = function(lat, lng) {
		if(lat){
			var myLatlng = new google.maps.LatLng(lat, lng);
		} else {
			var myLatlng = new google.maps.LatLng(10.997915, 106.861410);
		}
		
		var mapOptions = {
		  zoom: 15,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
		
		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map
		});
	}
	initialize(0,0);
});
</script>
<section class="template">
    <div class="container">
        <div class="breadcrumb clearfix">
            {module Breadcrumbs}
        </div>
        <div class="contentDL clearfix mb20">
            <div class="map_shop">
                <div id="map_canvas"></div>
            </div>
            <div class="list_shop">
                <h2>Hệ Thống cửa hàng</h2>
                <select class="fl" id="cities" onChange="changeCity(this.value)">
                    <option value="0">Chọn thành phố </option>
                    <?php foreach($cities as $city){?>
                    <option value="<?php echo $city->id;?>"><?php echo $city->name;?></option>
                    <?php }?>
                </select>
                <span id="districts">
                <select class="fl" id="districts" onChange="changeDistrict(this.value)">
                    <option value="0">Quận/Huyện</option>
                </select>
                </span>
                <div class="clear"></div>

                <div id="scrollbar1">
                    <div class="scrollbar" style="height: 467px;">
                        <div class="track" style="height: 467px;">
                          <div class="thumb" style="top: 0px; height: 50px;">
                            <div class="end"></div>
                          </div>
                        </div>
                    </div>
                    <div class="viewport">
                        <div class="overview" style="top: 0px;">
                            <ul class="itemshop clearfix">
                            	<?php foreach($this->items as $item){?>
                            	<li onClick="initialize(<?php echo $item->lat;?>,<?php echo $item->lng;?>);">
                                    <h3><?php echo $item->name;?></h3>
                                    <p>Địa chỉ: <?php echo $item->address;?><br>
                                    Tel: <?php echo $item->phone;?></p>
                                </li>
                                <?php }?>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

